<template>
	<view class="container999" @click="conClick" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
				<!-- 点击反馈组件 -->
		<clickCircle ref="clickCircle" v-if="isClick==1"></clickCircle>
		<view class='nav'>
			<!-- #ifdef H5 -->
				<view style="height: 45px;width: 100%;">边距盒子</view>
			<!-- #endif -->
			<!-- 搜索 -->
			<!-- <view class='searchInput999' v-if="isSearch==1">
				<view class='searchBox999'>
					<image src='/static/img/scrollList/icon-search.png' class='search999'></image>
				</view>
				<input class='input999' placeholder="输入关键词"></input>
			</view> -->
			<!-- 导航栏 agents导航栏标题 -->
			<jkNavTab ref="navTab" :tabTitle="navData" showNum="5" @changeTab='changeTab'></jkNavTab>
		</view>
		<!-- 回到顶部悬浮按钮 -->
		<movable-area style="height: 100vh; width: 100vw;position: absolute;bottom: 0;" v-if="isTop==1">
		    <movable-view class="addBtnBox" style="padding-top:120rpx;padding-bottom:120rpx;"  @touchmove.stop="" :x="isX" :y="isY" direction="all">
				<view class="addBtn" @click="toTop">TOP</view>
		    </movable-view>
		</movable-area>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
				<view :id="'top'+listIndex" style="width: 100%;height: 1px;margin-bottom: 60px;"></view>
				<view class='content'>
					<!-- <view v-if="listIndex == 0">我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容</view>
					<view v-if="listIndex == 1&&isBanner==1" >
						我是轮播图
						<swiper style="height: 30vh;width: 100vw;">
							<swiper-item v-for="(item,inde) in 3" :key="inde">
								<image style="height: 100%;width:100%;" src="/static/img/scrollList/logo.png"></image>
							</swiper-item>
						</swiper>
					</view> -->
					<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
						{{item}}
					</view>
					<view class='' style="text-align: center;" v-if="max[currentTab]==1">
						暂无信息
					</view>
				</view>
				<view class='noCard' v-if="listItem.length===0">
					暂无信息
				</view>
				<view style="width: 100%;height: 100rpx;opacity:0;">底部占位盒子</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
	
	
	
</template>

<script>
const util = require('../../utils/jk-throttle.js');
import refresh from './refresh.vue';
import jkNavTab from '../jk-navTab/jk-navTab.vue';
import clickCircle from './clickCircle.vue';
export default {
	name: 'JkScrollList',
	components: {refresh,jkNavTab,clickCircle},
	data() {
		return {
			toView:'',//回到顶部id
			isX:0,//放在store统一管理
			isY:999,//放在store统一管理
			list:[]
		};
	},
	props: {
		  isTop:{ //是否展示回到顶部按钮
			  type:Number,
			  default:1
		  },
		  isSearch:{ //是否启用搜索框
			  type:Number,
			  default:1
		  },
		  isBanner:{ //是否启用轮播图
			  type:Number,
			  default:1
		  },
		  isClick:{ //是否启用点击反馈组件
		  			  type:Number,
		  			  default:1
		  },
		  currentTab:{ //sweiper所在页
			  type:Number,
			  default:0
		  },
		  max:{ //数据请求完毕
			  type:Array,
			  default:[]
		  },
		  navData:{   //导航栏数据格式 --导航栏组件
		  			  type:Array,
		  			  default:[]
		  },
		  listData:{ //列表数据格式
		  			  type:Array,
		  			  default:[]
		  },
		  pageData:{ //列表数据格式
		  			  type:Array,
		  			  default:[]
		  }
	},
	created(e) {
		this.list = this.listData
	},
	methods: {
		setData(data){
			this.list = data
			this.$forceUpdate() //二维数组，开启强制渲染
		},
		changeTab(index){
			this.$emit('changeTab',index);
		},
		lower1(){
			this.$emit('loadMore'); 
		},
		toTop(){
			this.toView = ''
			setTimeout(()=>{
				this.toView = 'top' + this.currentTab
			},10)
		},
		// 点击反馈事件
		conClick(e) {
			if(this.isClick != 1){
				return
			}
				this.$refs.clickCircle.conClick(e);
			
		},
		// swiper 滑动
		swiperTab: function(e) {
			var index = e.detail.current //获取索引
			this.$refs.navTab.longClick(index);
		},
		
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e){
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh(){
				this.$emit('isRefresh');
				setTimeout(() => {
					
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
		}
	}
};
</script>

<style lang="scss">

	.addBtnBox{
		position: fixed;
		z-index:900;
		width: 140rpx;
		align-items: flex-end;
		justify-content: center;
		height: 140rpx;
		display:flex;
		.addBtn{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: white;
			font-size: 10px;
			font-weight: bold;
			background: #444857;
			line-height: 100rpx;
			text-align: center;
			box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
		}
	}
		.container999 {
	  width: 100vw;
	  font-size: 28rpx;
	  min-height: 100vh;
	  overflow: hidden;
	  color: #6B8082;
	  position: relative;
	  background-color: #f6f6f6;
	}
	.content {
		width: 100%;
	}
	
	.card {
		width: 90%;
		height: 368rpx;
		background-color: white;
		margin: 0 auto 42rpx auto;
		background: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
		border-radius: 5px;
		position: relative;
	}
	
	.noCard {
		width: 90%;
		height: 200rpx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10rpx;
	}
	
	
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24rpx;
		background-color: #50B7EA;
		z-index: 996;
	}
	
	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56rpx;
	}
	
	.search999 {
		width: 32rpx;
		height: 32rpx;
	}
	
	.searchBox999 {
		width: 56rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.input999 {
		color: #999;
		width: 80%;
	}
</style>
